<template>
  <div class="wrapper">
    <!-- 会员基本信息 -->
    <div class="member-info">
      <!-- 会员信息 -->
      <div class="user">
        <div class="avatar">
          <img :src='store.userinfo.avatar' alt="用户头像" />
        </div>
        <div class="userinfo">
          <div class="username">
            <div>{{store.userinfo.name}}</div>
            <div>您还不是会员</div>
          </div>
        </div>
      </div>

      <div class="describe">
        <span>开通会员平均每年可省：￥9500</span>
      </div>

      <!-- 会员价格信息 -->
      <div class="price" ref="price" @click="changeHandle">
        <!-- 季度会员价格 -->
        <div class="quarter-price item">
          <div>季度会员</div>
          <div>￥ <span>98</span> / 季</div>
          <div>合计￥98（青少年专属）</div>
        </div>

        <!-- 一年会员价格 -->
        <div class="one-year-price item">
          <div>1 年会员</div>
          <div>￥ <span>268</span> / 季</div>
          <div>合计 ￥ 268</div>
        </div>

        <!-- 三年会员价格 -->
        <div class="three-years-price item active" >
          <div>3 年会员</div>
          <div>￥ <span>196</span> / 年</div>
          <div>合计 ￥ 588(省￥ 216)</div>
          <div class="priority">推荐</div>
        </div>
      </div>

      <div class="buy-button">
        <button>立即以588元开通</button>
      </div>

      <div class="agreement">
        <span>开通即视为同意</span>
        <a href="javascript:;">《会员服务协议》</a>
      </div>
    </div>

    <!-- 会员专享权益 -->
    <div class="member-interests">
      <div class="title">会员专属权益</div>
      <ul class="interests-lists">
        <li>
          <div class="list-content">
            <img src="https://rs.dance365.com/teach_video_free.png" /><br />
            <p><span>713</span>个会员专区</p>
            <p>课程免费学习</p>
          </div>
        </li>
        <li>
          <div class="list-content">
            <img src="https://rs.dance365.com/member_preferential.png" /><br />
            <p>非会员专区课程</p>
            <p>可获会员立减优惠</p>
          </div>
        </li>
        <li>
          <div class="list-content">
            <img src="https://rs.dance365.com/member_screen@2x.png" /><br />
            <p>同屏对比</p>
            <p>功能</p>
          </div>
        </li>
        <li>
          <div class="list-content">
            <img src="https://rs.dance365.com/update_music@3x.png" /><br />
            <p>音频提取</p>
            <p>功能</p>
          </div>
        </li>
        <li>
          <div class="list-content">
            <img src="https://rs.dance365.com/music_clip@3x.png" /><br />
            <p>音频剪辑</p>
            <p>功能</p>
          </div>
        </li>
        <li>
          <div class="list-content">
            <img src="https://rs.dance365.com/member_icon_beat.png" /><br />
            <p>节拍口令</p>
            <p>功能</p>
          </div>
        </li>
        <li>
          <div class="list-content">
            <img
              src="https://rs.dance365.com/member_photo_download1@3x.png"
            /><br />
            <p>保存视频到</p>
            <p>手机本地相册</p>
          </div>
        </li>
        <li>
          <div class="list-content">
            <img src="https://rs.dance365.com/lv_ad@3x.png" /><br />
            <p>免广告特权</p>
          </div>
        </li>
        <li>
          <div class="list-content">
            <img src="https://rs.dance365.com/lv_accelerate.png" /><br />
            <p>成长等级</p>
            <p>加速特权</p>
          </div>
        </li>
        <li>
          <div class="list-content">
            <img src="https://rs.dance365.com/course_equity.png" /><br />
            <p>会员学习</p>
            <p>成长优先帮扶</p>
          </div>
        </li>
        <li>
          <div class="list-content">
            <img src="https://rs.dance365.com/member_logo.png" /><br />
            <p>会员专享</p>
            <p>身份标识</p>
          </div>
        </li>
        <li>
          <div class="list-content">
            <img src="https://rs.dance365.com/update_equity.png" /><br />
            <p>享受新增</p>
            <p>权益和功能</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "My_member",
});
</script>

<script setup lang="ts">
import {useUserInfoStore} from "@/stores/userInfo";
import { nextTick, onMounted, ref } from "vue";
const store=useUserInfoStore() 
const price = ref();

onMounted(() => {
  changeHandle()
});

const changeHandle = () => {
  const changeList = price.value.children;
  for (let i = 0; i < changeList.length; i++) {
    if (changeList[i].classList.contains("item")) {
      changeList[i].onclick = function () {
        for (let j = 0; j < changeList.length; j++) {
          changeList[j].classList.remove("active");
        }
        changeList[i].classList.add("active");
        console.log(changeList[i]);
      };
    }
  }
};
</script>

<style scoped>
.wrapper ul li {
  list-style: none;
}
.wrapper button {
  border: none;
}
.wrapper .member-info {
  padding-bottom: 37px;
  border-bottom: 1px solid #e3e3e3;
  text-align: center;
}
.wrapper .member-info .user {
  display: flex;
  width: 200px;
  margin: 0 auto;
}
.wrapper .member-info .user .avatar {
  width: 100px;
}
.wrapper .member-info .user .avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.wrapper .member-info .user .userinfo {
  width: 100px;
}
.wrapper .member-info .user .userinfo .username {
  margin: 24px 0 0 16px;
  width: 84px;
}
.wrapper .member-info .user .userinfo .username :nth-child(1) {
  font-size: 20px;
}
.wrapper .member-info .user .userinfo .username :nth-child(2) {
  margin-top: 12px;
  font-size: 14px;
  color: #f93684;
}
.wrapper .member-info .describe {
  margin-top: 19px;
  font-size: 16px;
}
.wrapper .member-info .price {
  width: 720px;
  margin: 0 auto;
  margin-top: 21px;
  display: flex;
  position: relative;
}
.wrapper .member-info .price .quarter-price {
  margin-right: 30px;
}
.wrapper .member-info .price .one-year-price {
  margin-right: 30px;
}
.wrapper .member-info .price .item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 220px;
  height: 124px;
  margin-top: 30px;
  font-size: 16px;
  border: 1px solid #b1b5c1;
  border-radius: 10px;
  cursor: pointer;
}
.wrapper .member-info .price .item span {
  font-size: 30px;
}
.wrapper .member-info .price .item .priority {
  position: absolute;
  background-color: #f93684;
  width: 76px;
  height: 36px;
  top: 10px;
  right: -30px;
  border-radius: 20px;
  text-align: center;
  line-height: 36px;
  color: #fff;
  border: 2px solid #fff;
}
.wrapper .member-info .price .active {
  border: 2px solid #f93684;
  background-color: #f9ebf1;
}
.wrapper .member-info .buy-button {
  width: 300px;
  height: 38px;
  margin: 30px auto 12px;
  padding: 9px 15px;
  background-color: #ff4683;
  border-radius: 10px;
}
.wrapper .member-info .buy-button button {
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: #fff;
  background-color: #ff4683;
}
.wrapper .member-info .agreement {
  font-size: 14px;
}
.wrapper .member-info .agreement a {
  color: #f93684;
}
.wrapper .member-interests {
  margin-top: 32px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e3e3e3;
}
.wrapper .member-interests .title {
  font-size: 20px;
  font-weight: 900;
}
.wrapper .member-interests .interests-lists {
  display: flex;
  flex-wrap: wrap;
  margin: 20px auto 5px;
  padding: 0 12px;
}
.wrapper .member-interests .interests-lists li {
  box-sizing: border-box;
  width: 129px;
  height: 129px;
  margin: 0 30px 30px 0;
  padding-top: 14px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #e3e3e3;
  border-radius: 10px;
  line-height: 20px;
}
.wrapper .member-interests .interests-lists li .list-content img {
  width: 46px;
  height: 42px;
  margin: 0 auto;
}
.wrapper .member-interests .interests-lists li .list-content span {
  color: #f93684;
}
.wrapper .member-interests .interests-lists :nth-child(6) {
  margin: 0 0 30px 0;
}
.wrapper .member-interests .interests-lists :nth-child(12) {
  margin: 0 0 30px 0;
}
</style>
